<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  props: {
    text: { type: String, default: "暂无数据" },
    translateY: { type: String, default: "-40%" },
  },
});
</script>

<template>
  <div class="no-data">
    <div class="no-data-w" :style="{ transform: `translateY(${translateY})` }">
      <img class="no-data-img" v-if="!$slots.default" src="" />
      <slot />
      <div class="no-data-text">{{ text }}</div>
    </div>
  </div>
</template>

<style lang="less">
.no-data {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;

  .no-data-w {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .no-data-img {
    width: 314px;
  }

  .no-data-text {
    font-size: 13px;
    color: #999999;
    line-height: 18px;
  }
}
</style>
